<template>
	<div class="m-25 mt-65">
		<div class="normal-box-mod">
			<div class="normal-box-hd clearfix">
				<div class="normal-box-title">
					<div class="decorate-square"></div>
					<h2>减量回收</h2>
				</div>
			</div>
			<div class="normal-box-bd">
				<div class="normal-list-page-mod">

					<card>
						<div class="normal-list-page-hd clearfix">
							<Col span="5"  class="mr-10">
							<queryData @ProvinceData="formdataValue" ref="hadregion"></queryData>
							</Col>
							<Button size="small" class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" @click='getTableData'>查询</Button>
						</div>
					</card>
				</div>
			</div>
			<div id="reducing-biao">
				<div id="reduce" style="width:100%;height:90%;;"></div>
				<!-- <reducing :reducing='this.reducing'></reducing> -->
			</div>
		</div>
	</div>
</template>
<script>
import queryData from '@/view/test/cityTestZj.vue'
import RecyclingreducingApi from '@/api/RecordsCenter/Recyclingreducing.js'

import moment from 'moment'
import { Message } from 'iview'

export default {
  name: 'Recyclingreducing',
  components: {
    queryData

  },
  data () {
    return {
      // 页面查询数据
      queryData: {
        provid: '',
        cityid: '',
        distid: '',
        strtid: '',
        commid: '',
        comminid: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      RecyclingreducingApi.getPageList(that.queryData)
        .then(res => {
          // console.log(res)

          var data = []
          var data1 = []
          var data2 = []
          for (var i = 0; i < res.data.length; i++) {
            data[res.data.length - 1 - i] = res.data[i].time
            data1[res.data.length - 1 - i] = res.data[i].recycle
            data2[res.data.length - 1 - i] = res.data[i].unRecycle
          }
          that.hadleGetFilesListApi(data, data1, data2)
          // that.reducing.type='减量回收'
        })
        .catch(error => {
          Message.error(error)
        })
    },
    hadleGetFilesListApi (x, y, z) {
      const option = {
        title: {
          text: this.title,
          textStyle: {
            // color: '#FFFFFF',
            fontSize: 25
          }
          // x:'right',
          // y:'center'
        },

        tooltip: {
          trigger: 'axis'
          // axisPointer: {
          // 	type: 'cross',
          // 	label: {
          // 		backgroundColor: '#6a7985'
          // 	}
          // }
        },
        color: ['#2db7f5', '#ff6600', '#921AFF', '#c32441', '#FF00FF', '#FF8EFF', '#53FF53', '#F9F900', '#00FFFF'],
        legend: {
          data: [
            {
              name: '可回收',
              textStyle: {
                color: '#2db7f5'
              }
            },
            {
              name: '不可回收',
              textStyle: {
                color: '#ff6600'
              }
            }
          ],
						        // data: ['可回收', '不可回收'],
          textStyle: {

            fontSize: 20
          }
						    },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {

          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

						 xAxis: {
          type: 'category',
          data: x,
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              fontSize: 16 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              // color: '#FFFFFF',
              width: 1
            }
          }
						 },
						 yAxis: {
							 type: 'value'
							 // min: 0,
							 // max: 100,

						 },
						    // Declare several bar series, each will be mapped
						    // to a column of dataset.source by default.
        series: [
						        {
						            name: '可回收',
						            type: 'line',
            smooth: true,
						            data: y,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(45,183,245,0.9)'
                }, {
                  offset: 0.4,
                  color: 'rgba(45,183,245,0.5)'
                }, {
                  offset: 1,
                  color: 'rgba(45,183,245,0.1)'
                }])
                // ['rgba(63,227,236,0.3)'],
              }
            }
						        },
						        {
						            name: '不可回收',
						            type: 'line',
            smooth: true,
						            data: z,
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255,102,0,0.9)'
                }, {
                  offset: 0.4,
                  color: 'rgba(255,102,0,0.5)'
                }, {
                  offset: 1,
                  color: 'rgba(255,102,0,0.1)'
                }])
                // ['rgba(63,227,236,0.3)'],
              }
            }
						        }

						    ]

      }
      let myChart = this.$echarts.init(document.getElementById('reduce'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
					    myChart.resize()
      })
    },

    formdataValue (formdata) {
			  this.queryData.provid = formdata.provid
			  this.queryData.commid = formdata.commid
			  this.queryData.cityid = formdata.cityid
			  this.queryData.comminid = formdata.comminid
			  this.queryData.distid = formdata.distid
			  this.queryData.strtid = formdata.strt
    }
  },
  mounted () {
    setTimeout(() => {
      this.hadleGetFilesListApi()
    })
  },
  created () {
    this.getTableData()
  }
}
</script>
<style>
	#reducing-biao{
		width:100%;
		height:70vh;
	}
</style>
